<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>GeoExt.Popup &mdash; GeoExt v1.1</title>
    <link rel="stylesheet" href="../../../_static/geoext.css" type="text/css" />
    <link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../../../',
        VERSION:     '1.1',
        COLLAPSE_MODINDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../../../_static/jquery.js"></script>
    <script type="text/javascript" src="../../../_static/doctools.js"></script>
    <link rel="shortcut icon" href="../../../_static/favicon.ico"/>
    <link rel="top" title="GeoExt v1.1" href="../../../index.html" />
    <link rel="up" title="Widgets" href="../widgets.html" />
    <link rel="next" title="GeoExt.PrintMapPanel" href="PrintMapPanel.html" />
    <link rel="prev" title="GeoExt.MapPanel" href="MapPanel.html" />
    
    
    
    
    

  </head>
  <body>
    <div class="header">
        <div class="wrap">
            <h1 id="logo"><a href="../../../index.html">GeoExt</a></h1>
            <ul id="top-nav">
                <li class="first"><a href="../../../docs.html">Documentation</a></li>
                <li><a href="../../../examples.html">Examples</a></li>
                <li><a href="../../../downloads.html">Download</a></li>
                <li><a href="http://trac.geoext.org/">Development</a></li>
            </ul>
            <div id="searchbox">
                <form class="search" action="../../../search.html" method="get">
                    <input id="searchbox-query" type="text" name="q" size="25" value="Search &hellip;" tabindex="3" onblur="if(this.value=='') this.value='Search &hellip;';" onfocus="if(this.value=='Search &hellip;') this.value='';" />
                    <input id="searchbox-submit" type="image" value="Search" src="../../../_static/img/search_icon_green.png" />
                    <input type="hidden" name="check_keywords" value="yes" />
                    <input type="hidden" name="area" value="default" />
                </form>
            </div>
        </div>
    </div>

    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li><a href="../../../index.html">GeoExt</a> &raquo;</li>
          <li><a href="../../index.html" >API Reference</a> &raquo;</li>
          <li><a href="../widgets.html" accesskey="U">Widgets</a> &raquo;</li>
        <li><a href="#"><tt class="docutils literal docutils literal"><span class="pre">GeoExt.Popup</span></tt></a></li>
      </ul>
    </div>

      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
            <h3><a href="../../../index.html">Table Of Contents</a></h3>
            <ul>
<li><a class="reference external" href="#"><tt class="docutils literal"><span class="pre">GeoExt.Popup</span></tt></a><ul>
<li><a class="reference external" href="#example-use">Example Use</a></li>
<li><a class="reference external" href="#config-options">Config Options</a></li>
<li><a class="reference external" href="#public-methods">Public Methods</a></li>
</ul>
</li>
</ul>

            <h4>Previous topic</h4>
            <p class="topless"><a href="MapPanel.html"
                                  title="previous chapter"><tt class="docutils literal docutils literal docutils literal"><span class="pre">GeoExt.MapPanel</span></tt></a></p>
            <h4>Next topic</h4>
            <p class="topless"><a href="PrintMapPanel.html"
                                  title="next chapter"><tt class="docutils literal"><span class="pre">GeoExt.PrintMapPanel</span></tt></a></p>
        </div>
      </div>


    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="geoext-popup">
<h1><a title="GeoExt.Popup" class="reference internal" href="#GeoExt.Popup"><tt class="xref docutils literal"><span class="pre">GeoExt.Popup</span></tt></a><a class="headerlink" href="#geoext-popup" title="Permalink to this headline">¶</a></h1>
<dl class="meta docutils">
<dt>Extends</dt>
<dd><ul class="first last simple">
<li><a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Window">Ext.Window</a></li>
</ul>
</dd>
<dt>xtype</dt>
<dd><tt class="docutils literal"><span class="pre">gx_popup</span></tt></dd>
</dl>
<dl class="class">
<dt id="GeoExt.Popup">
<em class="property">class </em><tt class="descclassname">GeoExt.</tt><tt class="descname">Popup</tt><big>(</big><em>config</em><big>)</big><a class="headerlink" href="#GeoExt.Popup" title="Permalink to this definition">¶</a></dt>
<dd>Popups are a specialized Window that supports anchoring
to a particular location in a MapPanel.  When a popup
is anchored to a location, that means that the popup
will visibly point to the location on the map, and move
accordingly when the map is panned or zoomed.</dd></dl>

<div class="section" id="example-use">
<h2>Example Use<a class="headerlink" href="#example-use" title="Permalink to this headline">¶</a></h2>
<p>Sample code to create a popup anchored to a feature:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">popup</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">Popup</span><span class="p">({</span>
    <span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;My Popup&quot;</span><span class="p">,</span>
    <span class="nx">location</span><span class="o">:</span> <span class="nx">feature</span><span class="p">,</span>
    <span class="nx">width</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span>
    <span class="nx">html</span><span class="o">:</span> <span class="s2">&quot;&lt;div&gt;Popup content&lt;/div&gt;&quot;</span><span class="p">,</span>
    <span class="nx">collapsible</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
</pre></div>
</div>
</div>
<div class="section" id="config-options">
<h2>Config Options<a class="headerlink" href="#config-options" title="Permalink to this headline">¶</a></h2>
<p>Configuration properties in addition to
those listed for <a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Window">Ext.Window</a>.</p>
<dl class="describe">
<dt>
<tt class="descname">ancCls</tt></dt>
<dd><tt class="docutils literal"><span class="pre">String</span></tt>  CSS class name for the popup&#8217;s anchor.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">anchored</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt>  The popup begins anchored to its location.  Default is
<tt class="docutils literal"><span class="pre">true</span></tt>.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">anchorPosition</tt></dt>
<dd><tt class="docutils literal"><span class="pre">String</span></tt>  Controls the anchor position for the popup. If set to
<tt class="docutils literal"><span class="pre">auto</span></tt>, the anchor will be positioned on the top or the bottom of
the window, minimizing map movement. Supported values are <tt class="docutils literal"><span class="pre">bottom-left</span></tt>,
<tt class="docutils literal"><span class="pre">bottom-right</span></tt>, <tt class="docutils literal"><span class="pre">top-left</span></tt>, <tt class="docutils literal"><span class="pre">top-right</span></tt> or <tt class="docutils literal"><span class="pre">auto</span></tt>.
Defaults to <tt class="docutils literal"><span class="pre">auto</span></tt>.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">location</tt></dt>
<dd><tt class="docutils literal"><span class="pre">OpenLayers.Feature.Vector</span></tt> or <tt class="docutils literal"><span class="pre">OpenLayers.LonLat</span></tt> or
<tt class="docutils literal"><span class="pre">OpenLayers.Pixel</span></tt> or <tt class="docutils literal"><span class="pre">OpenLayers.Geometry</span></tt> A location for this
popup&#8217;s anchor.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">map</tt></dt>
<dd><tt class="docutils literal"><span class="pre">OpenLayers.Map</span></tt> or <a title="GeoExt.MapPanel" class="reference external" href="MapPanel.html#GeoExt.MapPanel"><tt class="xref docutils literal"><span class="pre">GeoExt.MapPanel</span></tt></a>
The map this popup will be anchored to (only required if <tt class="docutils literal"><span class="pre">anchored</span></tt>
is set to true and the map cannot be derived from the <tt class="docutils literal"><span class="pre">location</span></tt>&#8216;s
layer.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">panIn</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt> The popup should pan the map so that the popup is
fully in view when it is rendered.  Default is <tt class="docutils literal"><span class="pre">true</span></tt>.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">popupCls</tt></dt>
<dd><tt class="docutils literal"><span class="pre">String</span></tt> CSS class name for the popup DOM elements.  Default is
&#8220;gx-popup&#8221;.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">unpinnable</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt> The popup should have a &#8220;unpin&#8221; tool that unanchors it from
its location.  Default is <tt class="docutils literal"><span class="pre">true</span></tt>.</dd></dl>

</div>
<div class="section" id="public-methods">
<h2>Public Methods<a class="headerlink" href="#public-methods" title="Permalink to this headline">¶</a></h2>
<p>Public methods in addition to those
listed for <a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Window">Ext.Window</a>.</p>
<dl class="method">
<dt id="GeoExt.Popup.setSize">
<tt class="descclassname">Popup.</tt><tt class="descname">setSize</tt><big>(</big><big>)</big><a class="headerlink" href="#GeoExt.Popup.setSize" title="Permalink to this definition">¶</a></dt>
<dd><table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters:</th><td class="field-body"><ul class="first last simple">
<li><em>w</em> &#8211; <tt class="docutils literal"><span class="pre">Integer</span></tt></li>
<li><em>h</em> &#8211; <tt class="docutils literal"><span class="pre">Integer</span></tt></li>
</ul>
</td>
</tr>
</tbody>
</table>
<p>Sets the size of the popup, taking into account the size of the anchor.</p>
</dd></dl>

</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
            <li class="right" style="margin-right: 10px">
              <a href="../../../genindex.html" title="General Index"
                 accesskey="I">index</a></li>
            <li class="right" >
              <a href="../../../modindex.html" title="Global Module Index"
                 accesskey="M">modules</a> |</li>
            <li class="right" >
              <a href="PrintMapPanel.html" title="GeoExt.PrintMapPanel"
                 accesskey="N">next</a> |</li>
            <li class="right" >
              <a href="MapPanel.html" title="GeoExt.MapPanel"
                 accesskey="P">previous</a> |</li>
        <li><a href="../../../index.html">GeoExt</a> &raquo;</li>
          <li><a href="../../index.html" >API Reference</a> &raquo;</li>
          <li><a href="../widgets.html" >Widgets</a> &raquo;</li>
        <li><a href="#"><tt class="docutils literal docutils literal"><span class="pre">GeoExt.Popup</span></tt></a></li>
      </ul>
    </div>

    <div class="footer">
      &copy; Copyright 2009-2010, GeoExt Community.
    </div>
  </body>
</html>